<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>商城首页- 模块- 轮播</title>
  <style>
	*{margin: 0; padding: 0;}
	.div{box-shadow:1px 1px 8px 2px #ccc; border-radius:5px; width:580px; height:580px; overflow:hidden; margin:0px auto; box-shadow:1px 1px 8px 2px #ccc;}
	.div div{width:1780px; height:448px; margin-left:-580px; }
	.div ul li {width:580px; height:580px; float:left; list-style-type:none; position:relative;}
	.click_ul{list-style-type:none;}
	.click_ul li{width:80px; height:25px; border:1px solid #ddd; background:#ddd; float:left; cursor:pointer;}
  </style>
 </head>
 <body>
	<div class="div" id="cnt">
		<div>
			<ul id="cnt_ul">
				<li class="tako" title="tako"></li>
				<li class="tako" title="tako"></li>
				<li class="tako" title="tako"></li>
			</ul>
		</div>
	</div>	
	<ul class="click_ul">
		<li title="">1</li>
		<li title="">2</li>
		<li title="">3</li>
		<li title="">4</li>
		<li title="">5</li>
		<li title="">6</li>
	</ul>
	<input type="button" value ="right" class ="right"><input type="button" value="left" class="left">
	<script src="js/MyjsV0-3.js"></script>
	<script>
	$(".click_ul")[0].$("li")[0].css("background:#555;", false) ;
	var fo = new FlipObject({
		liElements:$(".tako"),
		paths:["image/test/tako1.jpg", "image/test/tako2.jpg", "image/test/tako3.jpg", "image/test/takobang.jpg", "image/test/tako5.jpg", "image/test/takoMei.jpg"],
		outCnt:$("#cnt"),
		inCnt:$("#cnt"),
	}) ;
	var liEvent = new LiEvent({
		lis:$(".click_ul")[0].$("li"),
	}) ;
	function LiEvent(data){
		var pre = data.lis[0];
		LiEventHoverSuper.call(this, data) ;
		new InheritSupport().support(this, new LiEventHoverSuper(data)) ;
		this.overEventCss = function (e){
			e.css("background:#555;", false) ;
		}
		this.select = function(index){
			console.log("index - "+this.index) ;
			fo.select(this.index) ;
		}
		//当前点击时将上一次的样式还原
		this.preEventCss = function (e){
			e.css("background:#ddd;", false) ;
		}
		this.doReady() ;
	}

	/*
		FlipObject翻转相册对象

		适用场景
			-外容器
				-内容器
					-ul
						-*

		对象结构
			调用方法（public）	
				setInit(class_Name, path_Array, cnt_Id_Name) 
					class_Name	所需翻转框的元素class名
					path_Array	图片路径数组
					cnt_Id_Name	外容器的idName

				commit()		
				
			非调用方法(private) 
				onload()	浏览器打开时对界面元素属性的加载
				doCycle()   对单个相框移动进行循环处理
				tiemrFun()
				doCyc()		对整个模块相框移动进行循环处理
				addEvent()	对外容器添加事件
				
		
	*/
	//单次向某一方向轮转
	//无操作状态连续轮转
	function FlipObject(data){
		data.type = data.type || "right" ;	//轮转方向 默认向右
		var index = 1 ;		//初始下标
		var index_ = 0 ;
		var leftValue = 0 ; //向左移动的百分比值
		var timer ;			//2秒一次的计时器对象
		var oneSelf = this ;
		init() ;
		//停止移动
		this.stop = function (){
			clearInterval(timer) ;
		}
		//向左单次移动
		this.left = function(){
			if(!lTimerBool){ //限制开启多个计时器异常
				this.stop () ;
				leftTimer() ;
			}
		}
		//向右单次移动
		this.right = function(){
			if(!rTimerBool){ //限制开启多个计时器异常
				this.stop () ;
				rightTimer() ;
			}
		}
		//开始无状态移动
		this.run = function(){
			doCyc() ;
		}
		var tempIndex = 0 ;
		this.select = function (selectIndex){
			console.log("selectIndex - " + selectIndex) ;
			console.log("tempIndex - " + tempIndex) ;

			if(!(selectIndex == tempIndex)){
				if(selectIndex > tempIndex){
					tempIndex = selectIndex ;
					index = index_ = selectIndex - 1 ;
					index = (index != data.paths.length - 1 ? index + 1 : 0) ;
					console.log("index right - " + index) ; 
					data.liElements[0].style.background = "url(" + data.paths[index] + ")" ;
					oneSelf.right () ;
				}else{
					tempIndex = selectIndex ;
					index = index_ = selectIndex + 1 ;
					index = (index == 0 ? 5 : index - 1) ;
					data.liElements[2].style.background = "url(" + data.paths[index] + ")" ;
					oneSelf.left () ;
				}
			}	
		}
		//当浏览器载入的时候
		function init(){ 
			addEvent() ;
			data.liElements[0].style.background = "url(" + data.paths[data.paths.length-1] + ")" ;
			data.liElements[1].style.background = "url(" + data.paths[0] + ")" ;
			data.liElements[2].style.background = "url(" + data.paths[1] + ")" ;
		}
		//当删除第一个元素的时候需要再次进行初始化
		var lTimer ;				//左计时器对象
		var lTimerBool = false ;	//左计时器是否开启   限制多开、
		var limiBool ;				//限制执行一次		
		var rTimer ;				//右计时器对象
		var rTimerBool = false ;	//右计时器是否开启   限制多开、
		function leftTimer(){
			if(rTimer != undefined)
				clearInterval(rTimer) ;
			lTimerBool = true ;
			limiBool = true ;
			lTimer = setInterval(function(){
				leftValue -= 2 ;
				data.liElements[1].style.left = leftValue + "%" ;
				data.liElements[2].style.left = leftValue + "%" ;
				if(rTimerBool){
					if(limiBool){
						limiBool = false ;
						index = (index != data.paths.length - 1 ? index + 1 : 0) ;
					}
					data.liElements[0].style.left = leftValue + "%" ;
				}	
				if(minStrategy()){
					clearInterval(lTimer) ;
					leftValue = 0 ;
					//上面的值将会降至-32.5%达到移动效果
					//因为下面有removeChild清除第一个元素
					//导致缺少元素状态，即恢复了最原始的状态
					//因此要将left值设置为0
					data.liElements[1].style.left = "0%" ;
					data.liElements[2].style.left = "0%" ;
					
					index = (index == 0 ? 5 : index - 1) ;
					if(!rTimerBool){
						index_ = (index_ == 0 ? 5 : index_ - 1) ;
						liEvent.checkOver(index_) ;
						data.liElements[0].remove() ;
						console.log("left - "+index) ;
						data.outCnt.$("ul")[0].insert("<li class='tako' style='background:url(" + data.paths[index] + ")' title='tako' ></li>") ;
					}
					lTimerBool = false ;
					rTimerBool = false ;
				}
			}, 50) ;
		}
		function minStrategy(){
			if(rTimerBool){
				return leftValue < 0 ;
			}
			return leftValue < -30 ;
		}
		function maxStrategy(){
			if(lTimerBool){
				return leftValue > 0 ;
			}
			return leftValue > 30 ;
		}
		function rightTimer(){
			if(lTimer != undefined)
				clearInterval(lTimer) ;
			rTimerBool = true ;
			limiBool = true ;
			rTimer = setInterval(function(){
				leftValue += 2 ;
				data.liElements[0].style.left = leftValue + "%" ;
				data.liElements[1].style.left = leftValue + "%" ;
				if(lTimerBool){
					if(limiBool){
						limiBool = false ;
						index = (index == 0 ? 5 : index - 1) ;
					}
					data.liElements[2].style.left = leftValue + "%" ;
				}
				if(maxStrategy()){
					clearInterval(rTimer) ;
					leftValue = 0 ;
					//上面的值将会降至32.5%达到移动效果
					//因为下面有removeChild清除第一个元素
					//导致缺少元素状态，即恢复了最原始的状态
					//因此要将left值设置为0
					data.liElements[0].style.left = "0%" ;
					data.liElements[1].style.left = "0%" ;
					index = (index != data.paths.length - 1 ? index + 1 : 0) ;
					if(!lTimerBool){
						index_ = (index_ != data.paths.length - 1 ? index_ + 1 : 0) ;
						liEvent.checkOver(index_) ;
						data.liElements[2].remove() ;
						data.outCnt.$("ul")[0].insertTop("<li class='tako' style='background: url(" + data.paths[index] + ")' title='tako' ></li>") ;
						
					}
					lTimerBool = false ;
					rTimerBool = false ;
				}
			}, 50) ;
		}
		function doCyc(){
			timer = setInterval(function(){
				switch(data.type){
					case "left" : leftTimer() ; break ;
					case "right" : rightTimer() ; break ;
					default: throw new Error("type参数格式不正确 - "+data.type + "(参数格式为right ， left)") ;
				}
			}, 3000) ;
		}
		function addEvent(){
			var flag_Limit = true ; //限制清除一次
			data.outCnt.onmouseover = function(){
				if(flag_Limit){
					oneSelf.stop () ;
					flag_Limit = false ;
				}
			}
			data.outCnt.onmouseout = function(){
				doCyc() ;
				flag_Limit = true ;
			}
		}
	}
	/**/
	

	$(".right")[0].onclick = function(){
		fo.right() ;
	}
	$(".left")[0].onclick = function(){
		fo.left() ;
	}
	
	</script>
 </body>
</html>